<template>
	<view>
		<u-navbar title="服务订单" :autoBack="true" placeholder>
		</u-navbar>
		<view class="serch-box flex-align px-8 bg-fff">
			<view class="input-box flex-align ps-10 flex-1 br-8">
				<u-icon name="search" color="#C6D2CE" size="28"></u-icon>
				<input class="ms-8 flex-1" type="text" v-model="keyword" placeholder="搜订单" placeholder-class="input-css"
					@blur="changeKeyword" />
				<view class="serch-button flex-align px-16 fs-14 fw-400 color-fff">搜索</view>
			</view>
		</view>
		<view class="bg-fff">
			<u-tabs :list="list1" :itemStyle="{ height: '40px',width:'108rpx' }" :current="tabsCurrent"
				inactiveStyle="font-weight: 400;font-size: 32rpx;color:#5F6865;"
				activeStyle="font-weight: 400;font-size: 32rpx;color:#24C98F" lineColor="#24C98F" lineWidth="60"
				lineHeight="2" @click="changeTabs"></u-tabs>
		</view>
		<view class=" px-8">
			<scroll-view scroll-y="true" :style="{height:`${scrollHeight}px`}">
				<view class="item bg-fff p8 mt-8 br-8" v-for="(item,index) in orderList" :key="index"
					@click="toDetail(item)">
					<view class="flex-align">
						<image :src="item.categoryIcon" mode="aspectFill" class="order-type-image"></image>
						<view class="fw-600 fs-16 color-5F6865 flex-1 ps-8">{{item.productName}}</view>
						<view class="fw-500 fs-12 color-222">{{getStatus(item.status)}}</view>
					</view>
					<view class="lable-box flex-align mt-8">
						<view class="lable-item bg-f5 fw-400 fs-14 bg-F5F9F9 color-76848E px-12 py-6 me-8 mt-8">
							{{item.hospitalName || ''}}
						</view>
						<view class="lable-item bg-f5 fw-400 fs-14 bg-F5F9F9 color-76848E px-12 py-6 me-8 mt-8">
							{{item.department || ''}}
						</view>
						<view v-if="item.patientName != null"
							class="lable-item user-label bg-f5 fw-400 fs-14 px-12 py-6 me-8 mt-8 flex-align">
							<image src="/static/image/perison-icon.png" mode="aspectFill"></image>
							{{item.patientName || ''}}
						</view>
					</view>
					<view class="flex-align mt-8">
						<image src="/static/image/time-icon.png" mode="aspectFill" class="time-icon"></image>
						<view class="fw-400 fs-13 color-666 ps-4">服务时间：{{item.serviceTime}}</view>
					</view>
					<view class="flex-align mt-16">
						<view class="flex-1"></view>
						<u-button text="立即接单" v-if="item.status === 2"
							:customStyle="`${buttonStyle};background-color: #24C98F;color:#fff`"
							@click.native.stop="acceptOrder(item)"></u-button>
						<u-button v-if="item.status == 3" text="查看订单"
							:customStyle="`${buttonStyle};background-color: #24C98F;color:#fff`"></u-button>
						<u-button v-if="(item.status == 4 || item.status == 5) && !item.isCompanionRecord" text="跟进订单"
							:customStyle="buttonStyle"></u-button>
					</view>
				</view>
				<view v-if="kong" class="flex-align flex-center flex-column" :style="{height:`${scrollHeight - 50}px`}">
					<u-empty mode="data" icon="/static/image/data.png" width="240" height="240">
					</u-empty>
				</view>
				<view style="height: 80rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
					status: 0
				}, {
					name: '待服务',
					status: 3
				}, {
					name: '服务中',
					status: 4
				}, {
					name: '待评价',
					status: 5
				}, {
					name: '已完成',
					status: 6
				}],
				orderList: [], // 服务订单列表
				scrollHeight: 0,
				tabsCurrent: 0, //标签索引
				buttonStyle: 'width:176rpx;font-weight: 400;color:#5F6865;height:68rpx;margin-left:32rpx;border-radius:8rpx;',
				kong: false,
				keyword: ''
			}
		},
		onLoad(options) {
			this.tabsCurrent = options.current ? options.current : 0;
			this.scrollHeight = this.$f.sys().screenHeight - this.$f.sys().top - 44 - 52 - 40 - 2;
			this.getServiceOrderList()
		},
		methods: {
			changeKeyword() {
				this.getServiceOrderList()
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/home/detail?orderNumber=${item.orderNumber}`
				})
			},
			// 接单
			acceptOrder(item) {
				uni.showModal({
					title: '确认接单',
					content: '确定要接受这个陪诊订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.get({
								url: '/companion/order/service/accept',
								loadingTip: '处理中...',
								data: {
									orderNumber: item.orderNumber
								},
								success: (resp) => {
									this.$f.msg('接单成功');
									this.getServiceOrderList('upper');
								},
								fail: (err) => {
									this.$f.msg('接单失败，请稍后重试');
								}
							});
						}
					}
				});
			},
			///标签切换
			changeTabs(e) {
				this.tabsCurrent = e.index;
				this.getServiceOrderList();
			},
			getServiceOrderList() {
				this.loading = true;
				this.$api.get({
					url: '/companion/order/service/list',
					data: {
						status: this.list1[this.tabsCurrent].status,
						keyword: this.keyword
					},
					loadingTip: '加载中...',
					success: res => {
						if (res) {
							this.orderList = res.orders || [];
						} else {
							this.$f.msg(res.msg || '获取订单列表失败');
						}
						this.loading = false;
						if (res.orders.length) {
							this.kong = false;
						} else {
							this.kong = true;
						}
					}
				});
			},
			getStatus(starus) {
				switch (starus) {
					case 2:
						return '待接单';
					case 3:
						return '待服务';
					case 4:
						return '服务中';
					case 5:
						return '待评价';
					case 6:
						return '已完成';
					default:
						return '未知状态'
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.serch-box {
		height: 52px;
		border-top: 2rpx solid #F5F5F5;

		.input-box {
			height: 72rpx;
			background-color: #F5F5F5;

			.input-css {
				font-weight: 400;
				color: #A7B9B3;
				font-size: 28rpx;
			}

			.serch-button {
				height: 72rpx;
				background-color: #24C98F;
				border-radius: 0 16rpx 16rpx 0;
			}
		}
	}

	.time-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.user-label {
		background-color: #FFF7EF;
		color: #76848E;

		image {
			margin-right: 8rpx;
			width: 28rpx;
			height: 28rpx;
		}
	}

	.item {
		.order-type-image {
			width: 48rpx;
			height: 48rpx;
		}

		.lable-box {
			flex-wrap: wrap;
		}
	}
</style>